<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>注册页面</title>
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../awesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
	</head>

	<body>
		<!--弹性盒子-->
		<div id="bg">
			<!--弹性子元素-->
			<div id="d1">

				<div id="head">
					<span>注</span><span>册</span>
				</div>
			</div>
			<div id="d2">
				<div id="userinfo">
					<!--表单 method(提交方式 get [在地址 栏上面直接显示 ] | post[流的方式传递 加密]) action（提交地址 ） enctype(编码格式)-->
					<form method="post" action="/login">
						<div id="phoneDiv">
							<i id="phoneIcon" class="fa fa-phone fa-lg"></i>
							<input type="text" id="phone" onclick="checkPhone()" onblur="checkPhoneVal()" placeholder="请输入您的手机号" />
						</div>
						<div id="passwordDiv">
							<i id="passwordIcon" class="fa fa-neuter fa-lg"></i>
							<input type="password" id="password" onclick="chooseStyle('passwordDiv')" placeholder="请输入您的密码" />
						</div>
						<div id="">
							<i class="fa fa-user fa-lg"></i>
							<input type="password" placeholder="请输入您确认的密码" />
						</div>
						<div id="">
							<i class="fa fa-address-book"></i>
							<input type="text" placeholder="请输入您的姓名" />
						</div>
						<div id="" style="display: flex;flex-direction: row;">
							<div style="box-sizing: content-box;display: flex;justify-content: space-around;align-items: center;">
								<i class="fa fa-mars-stroke fa-2x"></i>
								<div onclick="toggle();" class="gender">
									<i id="v" class="fa fa-check fa-3x"></i>
								</div>
							</div>
							<div style="box-sizing: content-box;display: flex;justify-content: space-around;;align-items: center;">
								<i class="fa fa-mercury fa-2x"></i>
								<div onclick="toggle1();" class="gender">
									<i id="v1" class="fa fa-check fa-3x"></i>
								</div>
							</div>
						</div>
					</form>
				</div>

				<div id="regBtn">
					<!--
						javascript : 基于对象[html 元素]的事件驱动的脚本语言
					1 ： 找对象
					1.1  找到方法承载体，事件
					2 : 找被调用对象
					
					3 : 想做什么
					-->

					<button class="greenBtn">注册</button>
				</div>

				<style>
					.gender {
						display: inline-block;
						width: 50px;
						height: 50px;
						border: 1px solid deepskyblue;
					}
					
					.gender:hover {
						border: 1px solid limegreen;
					}
				</style>
				<script>
					function toggle() {
						if (document.getElementById("v").className === "") {
							document.getElementById("v").className = "fa fa-check fa-3x";
						} else {
							document.getElementById("v").className = "";
						}
					}function toggle1() {
						if (document.getElementById("v1").className === "") {
							document.getElementById("v1").className = "fa fa-check fa-3x";
						} else {
							document.getElementById("v1").className = "";
						}
					}
				</script>
			</div>
			<div id="d3">
				<div id="main">
					<div>
						<i class="fa fa-home fa-2x"></i>
					</div>
					<div id="mainText">
						首页
					</div>
				</div>
				<div id="discovery">
					<div>
						<i class="fa fa-eye fa-2x"></i>
					</div>
					<div style="text-align: center;">
						发现
					</div>
				</div>
				<div id="order">
					<div>
						<i class="fa fa-shopping-bag fa-2x"></i>
					</div>
					<div style="text-align: center;">
						订单
					</div>
				</div>
				<div id="myself">
					<div>
						<i class="fa fa-user fa-2x"></i>
					</div>
					<div style="text-align: center;">
						我的
					</div>
				</div>
			</div>
		</div>
		<script>
			function chooseStyle(id) {
				// phoneDiv  js选择器
				var pDiv = window.document.getElementById(id);
				pDiv.style.border = "2px solid blue";
				pDiv.style.boxShadow = "3px 3px 3px gray";
			}
		
			/**
			 *  用于表示选中输入框以后的状态 
			 */
			function checkPhone() {
				// phoneDiv  js选择器
				var pDiv = window.document.getElementById("phoneDiv");
				pDiv.style.border = "2px solid blue";
				pDiv.style.boxShadow = "3px 3px 3px gray";
			}
			/**
			 * 输入 框 完成以后的值 是否合规断定
			 */
			function checkPhoneVal() {
				var phoneVal = document.getElementById("phone").value;
				var pDiv = document.getElementById("phoneDiv");
				var phoneIcon = document.getElementById("phoneIcon");
				// + {1,} * {0,} ?{0,1}
				var reg = /(139|147|156|137|153)[0-9]{8}/;
				console.log(reg.test(phoneVal));
				if (!reg.test(phoneVal)) {
					pDiv.style.border = "2px solid red";
					phoneIcon.className = "fa fa-close fa-lg";
					phoneIcon.style.color = "red";
				} else {
					pDiv.style.border = "2px solid green";
					phoneIcon.style.color = "green";
					phoneIcon.className = "fa fa-check";
				}
				pDiv.style.boxShadow = "0px 0px 0px gray";
			}
		</script>
	</body>

</html>